<style scoped lang="less">
.mv {
  max-width: 800px;
  margin: 30px auto 0;
  &__title{
    &:hover{
      cursor: pointer;
      color: red;
    }
    font-size: 14px;
    color: #141B27;
    transition: color ease-in-out 300ms;
  }
  &__list{
    margin: 20px auto 0;
    display: flex;
    flex-flow: row nowrap;
    gap: 14px;
    box-sizing: border-box;
    border-radius: 10px;
    padding-bottom: 20px;
    &__item{
      flex-shrink: 0;
      box-sizing: content-box;
      position: relative;
      &__image{
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        max-width: 400px;
        transition: all ease-in-out 300ms;
        &__image{
          width: 100%;
          height: 120px;
          object-fit: cover;
          display: block;
        }
        &:hover{
          box-shadow: 2px 2px 16px 5px rgba(0, 0, 0, 0.23);
        }
      }

      &__title{
        width: 90%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: break-word;
        margin-top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
      &__sub-title{
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #bbbbbb;
        display: flex;
        flex-flow: row nowrap;
        margin-left: -2px;
        &__item{
          transition: color ease-in-out .3s;
          &:hover{
          cursor: pointer;
          color: #f54444;
        }
          margin: 0 2px;
        }
      }
    }
  }
}
</style>
<template>
  <div class="mv">
    <div class="mv__title" >推荐MV ></div>
    <div class="mv__list" ref="mv">
      <div class="mv__list__item" v-for="(ele,index) of listCom" :key="index" @click="handleClickMv(ele)">
        <div class="mv__list__item__image">
          <img :src="ele.imageUrl" class="mv__list__item__image__image"/>
        </div>
        <div class="mv__list__item__title">{{ ele.title }}</div>
        <div class="mv__list__item__sub-title">
          <div class="mv__list__item__sub-title__item" :key="index" @click="handleClickArt(item)" v-for="(item , index) of ele.artists">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
  <ScrollBar :el="mv"></ScrollBar>
</template>

<script lang="ts" setup>
import { AxiosService } from "@/core";
import ScrollBar from '@/components/scrollBar'
import {computed, ref} from "vue";
const axios = new AxiosService('netEasyMusic')
const mv  = ref(null)

const list = ref([])
const listCom = computed(( ) => list.value?.map((ele:any, index:number) => ({
  ...ele,
  index,
  imageUrl: ele?.picUrl,
  title: ele?.name,
  artists:ele?.artists.map((item:any,index:number) => ({
    ...item,
    title: item?.name ?? null
  })) ?? [],
})))
axios.get({
  api:'/personalized/mv/list',
  params: { limit: 6 },
  success: ({result}) => list.value = result
})

// 交互
/** 点击mv */
const handleClickMv = (event:any) => {

}
/**  点击艺人*/
const handleClickArt = (event:any) => {

}
</script>

